<template>
  <div class="container">
    <div class="data_box" style="height:540px;">
    <!-- 搜索框 -->
      <MySearch @parent-searchBtn="searchBtn"></MySearch>

      <div
        class="add"
        style="width: 190px; height: 40px; float: right; margin-bottom: -10px"
      >
        <el-button
          size="mini"
          type="danger"
          @click="deleteAllSelect()"
          :disabled="multipleSelection.length == 0"
        >
          批量删除
        </el-button>
        <el-button
          size="mini"
          type="primary"
          @click="handleAdd()"
          style="width: 80px"
        >
          新增
        </el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="发布日期">
          <template slot-scope="scope">{{
            scope.row.pubDate | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column prop="cmtId" label="评论 ID"> </el-table-column>
        <el-table-column prop="userId" label="用户 ID"> </el-table-column>
        <el-table-column prop="replyId" label="回复 ID"> </el-table-column>
        <el-table-column prop="cmtType" label="评论类型"> </el-table-column>
        <el-table-column prop="essayId" label="文章 ID" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button size="mini" @click="routeToEssayEdit(scope.row)"
              >编辑</el-button
            > -->
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页按钮 -->
    <div class="pagination-box">
      <my-pagination
        style="text-align: right; margin-right: 100px"
        @parent-getData="getData"
        :dataCount="dataCount"
      ></my-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNum: 1,
      dataCount: 0, // 获取数据总条数
      tableData: [
        // {
        //   cmtId: "1",
        //   pubDate: "2016-05-03",
        //   userId: "1",
        //   replyId: "1",
        //   cmtType: "1",
        //   cmtContent: "1",
        //   essayId: "1",
        // }
      ],
      multipleSelection: [],
    };
  },
  mounted() {
    this.getData(this.pageNum, 5);
    this.getDataCount();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleAdd() {
      let formData = {
        cmtId: "",
        userId: "",
        replyId: "",
        essayId: "",
        cmtType: "",
        cmtContent: "评论正文",
      };
      this.$setSessionStorage("comment", formData);
      this.$router.push({
        path: "/commentEdit",
        query: { editTitle: "新增评论" },
      });
    },
    // routeToEssayEdit(data) {
    //   this.$setSessionStorage("comment", data);
    //   this.$router.push({
    //     path: "/commentEdit",
    //     query: { editTitle: "编辑评论" },
    //   });
    // },
    handleDelete(index, itemData) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 执行删除
          this.onDelData(itemData.cmtId);
        })
        .then(() => {
          this.tableData.splice(index, 1);
          this.getData(this.pageNum, 5);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 根据页码发起请求获取数据
    getData(pageNum, pageSize) {
      // 分页组件调用此方法时，更新当前页码
      this.pageNum = pageNum;
      this.$axios
        .get("comment/getByPage?pageNum=" + pageNum + "&pageSize=" + pageSize)
        .then((result) => {
          this.tableData = result.data;
        })
        .catch((err) => {
          alert(err);
        });
    },
    // 获取数据的总条数
    getDataCount() {
      this.$axios
        .get("comment/getDataCount")
        .then((result) => {
          this.dataCount = result.data;
        })
        .catch((err) => {
          alert(err);
        });
    },
    onDelData(cmtId) {
      this.$axios
        .get("comment/deleteCommentById?cmtId=" + cmtId)
        .then((result) => {
          if (result.data == 1) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch((err) => {
          this.$message({
            showClose: true,
            message: "错误信息：" + err,
            type: "warning",
          });
        });
    },
    onDelAllData(selectArr) {
      this.$axios
        .post("comment/deleteCommentByArrId", selectArr)
        .then((result) => {
          if (result.data == selectArr.length) {
            this.$message({
              showClose: true,
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch((err) => {
          this.$message({
            showClose: true,
            message: "删除失败：" + err,
            type: "warning",
          });
        });
    },
    deleteAllSelect() {
      let selectArrId = [];
      this.multipleSelection.forEach((row) => {
        selectArrId.push(row.cmtId);
      });

      this.$confirm("此操作将永久多条删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 执行删除
          this.onDelAllData(selectArrId);
        })
        .then(() => {
          let newTableData = this.tableData.filter((item) => {
            return selectArrId.indexOf(item.cmtId) == -1;
          });
          this.tableData = newTableData;
          this.getData(this.pageNum, 5);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    searchBtn(value){
      if(value != ''){
        let newTable = this.tableData.filter(
          item => item.cmtId == value
        )
        this.tableData = newTable;
      } else {
        this.getData(this.pageNum, 5)
      }
    }
  },
};
</script>